<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="initial-scale=1,width=device-width" />
    <meta name="format-detection" content="telephone=no" />
    <title>The Vanilla Calendar Pro is a versatile JavaScript date and time picker component with TypeScript support, making it compatible with any JavaScript frameworks and libraries.</title>
    <link rel="icon" type="image/svg+xml" href="../../../favicon.svg" />
    <link rel="stylesheet" href="../../../index.css" />
    <script defer src="./main.ts" type="module"></script>
  </head>
  <body class="font-sans bg-white bg-light-mode text-slate-900 min-h-screen container mx-auto text-center flex flex-col items-center py-12 dark:bg-slate-900 dark:bg-dark-mode dark:text-white">
    <h1 class="block mb-7 text-6xl font-extrabold">Vanilla Calendar Pro</h1>
    <p class="block max-w-[700px] text-lg mb-12 dark:text-slate-400">A universal JavaScript date and time picker component with TypeScript support, making it compatible with any JavaScript framework and library.</p>
    <button id="set-date" type="button" class="mb-7 w-64 border-gray-200 border-2">Dynamically Set Date</button>
    <label>
      <div>Datepicker tag 'input'</div>
      <input id="calendar-input" class="input" name="calendar" type="text" readonly />
    </label>
    <div>
      <div>Datepicker tag 'div'</div>
      <div id="calendar-div" class="input"></div>
    </div>
  </body>
</html>
